<template>
  <div>
    <Sticky>
      <NavBar class="hd-navbar" @click-left="onClickLeft" @click-right="onClickRight">
        <template #left>
          <Icon name="wap-nav" size="18" color="#fff" />
        </template>
        <template #title>
          <HeaderSearch>
            <Icon name="search" size="18" color="#ccc" />
            <span class="g-font-14 g-text-gray">笔记本电脑</span>
          </HeaderSearch>
        </template>
        <template #right>
          <div v-if='!isAuth'>登录</div>
          <Icon name='user-circle-o' v-else color='#fff' size='22'/>
        </template>
      </NavBar>
    </Sticky>
    <div class="placehdler-bg"></div>
    <Swipe :autoplay="3000" indicator-color="#e43130" class="swipe g-radius-6">
      <SwipeItem v-for="img in bannerList" :key="img.id">
        <img :src="img.url" class="g-img-response" />
      </SwipeItem>
    </Swipe>
    <Swipe :loop="false" @change="swipeChange">
      <SwipeItem>
        <ul class="navbar-box">
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar1.png.webp" class="icon-navbar" />
            <span>京东超市</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar2.png.webp" class="icon-navbar" />
            <span>数码电器</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar3.png.webp" class="icon-navbar" />
            <span>京东服饰</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar4.png.webp" class="icon-navbar" />
            <span>京东生鲜</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar5.png.webp" class="icon-navbar" />
            <span>京东到家</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar6.png.webp" class="icon-navbar" />
            <span>充值缴费</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar7.png.webp" class="icon-navbar" />
            <span>9.9元拼</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar8.png.webp" class="icon-navbar" />
            <span>领券</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar9.png.webp" class="icon-navbar" />
            <span>赚钱</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar10.png.webp" class="icon-navbar" />
            <span>PLUS会员</span>
          </li>
        </ul>
      </SwipeItem>
      <SwipeItem>
        <ul class="navbar-box">
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar11.png.webp" class="icon-navbar" />
            <span>京东国际</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar12.png.webp" class="icon-navbar" />
            <span>京东拍卖</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar13.png.webp" class="icon-navbar" />
            <span>唯品会</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar14.png.webp" class="icon-navbar" />
            <span>玩3C</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar15.png.webp" class="icon-navbar" />
            <span>沃尔玛</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar16.png.webp" class="icon-navbar" />
            <span>美妆馆</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar17.png.webp" class="icon-navbar" />
            <span>京东旅行</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar18.png.webp" class="icon-navbar" />
            <span>拍拍二手</span>
          </li>
          <li class="navbar-item">
            <img src="../../assets/navbar/navbar19.png.webp" class="icon-navbar" />
            <span>物流查询</span>
          </li>
          <li class="navbar-item"> 
            <img src="../../assets/navbar/navbar20.png.webp" class="icon-navbar" />
            <span>全部</span>
          </li>
        </ul>
      </SwipeItem>
      <template #indicator>
        <div class="van-swipe__indicators navbar-indicators">
          <i
            v-for='n in 2'
            :key='n'
            :class='{active: swipeCur == n-1}'
            class="van-swipe__indicator"
          ></i>
        </div>
      </template>
    </Swipe>

    <div class='g-padding-10'>
      <!-- 秒杀 -->
      <div class='bg-white g-padding-10 g-radius-6'>
        <div class="g-justiry-between g-align-middle">
          <div class="g-align-middle">
            <img width='100' src="../../assets/images/ms.png" alt="" class='img-ms g-mr-10'/>
            <span class='g-mr-5'>0点场</span>
            <CountDown :time="countDownTime">
              <template v-slot="timeData">
                <span class="countDown-item">{{ timeData.hours }}</span>
                <span class="g-text-primary">：</span>
                <span class="countDown-item">{{ timeData.minutes }}</span>
                <span class="g-text-primary">：</span>
                <span class="countDown-item">{{ timeData.seconds }}</span>
              </template>
            </CountDown>
          </div>
          <div class='g-text-primary g-align-middle'>
            更多秒杀
            <Icon name='arrow' size='16' color='#e43130'/>
          </div>
        </div>
        <ul class="product-scroll g-mt-10">
          <li class='product g-text-center' v-for='n in msProductList' :key='n.id'>
            <img class='g-img-response' :src="n.img" alt="">
            <p class='g-text-price'>￥{{n.newCost}}</p>
            <del class='g-text-gray g-font-12'>￥{{n.oldCost}}</del>
          </li>
        </ul>
      </div>
      <!-- 优惠券 -->
      <ul class="g-radius-6 g-mt-10 g-flex g-overflow-hide">
        <li>
          <img class='g-img-response' src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/49601/16/12206/115887/5d91b4d5E34709952/aba2bcb4855e6e52.png!q70.jpg.dpg" alt="">
        </li>
        <li>
          <img class='g-img-response' src="https://m.360buyimg.com/mobilecms/s376x240_jfs/t1/32449/33/15631/174497/5cc2d86bE0289110c/9c53e25651659d43.png!q70.jpg.dpg" alt="">
        </li>
      </ul>
      <!-- 东家小院 -->
      <img class='g-img-response' src="https://m.360buyimg.com/mobilecms/s750x80_jfs/t1/104532/40/2146/24646/5dcc2957E83954979/5ec2bb870605dcb3.png!q70.jpg.dpg" alt="东家小院">
      <Grid :column-num="2" icon-size='50'>
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/89388/33/18897/250523/5e9986fdE04f6a3d6/f668d5d4469361dd.jpg!q70.jpg.dpg" text="大学生活" />
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/52986/2/12478/18913/5d96ed2aE2ad31cb6/74ce632368b0b310.jpg!q70.jpg.dpg" text="唱片潮流" />
      </Grid>
      <Grid :column-num="4" icon-size='50'>
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/52986/2/12478/18913/5d96ed2aE2ad31cb6/74ce632368b0b310.jpg!q70.jpg.dpg" text="下饭能手" />
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/54432/27/6645/106741/5d43fabbE3146655e/80e4123e5ce57bac.jpg!q70.jpg.dpg" text="优雅干练" />
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/98886/18/7794/175498/5e008665E4d0555b5/2238f68bdb90707b.jpg!q70.jpg.dpg" text="时尚男鞋" />
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/8804/21/1234/65226/5bcd68edEaab8a377/407cc9c792510916.jpg!q70.jpg.dpg" text="租房贵族" />
      </Grid>
      <!-- 每日逛 -->
      <img class='g-img-response' src="https://m.360buyimg.com/mobilecms/s750x80_jfs/t1/103080/1/6315/23804/5df25d68E3eae6519/deef719dfdfe2844.png!q70.jpg.dpg" alt="每日逛">
      <Grid :column-num="4" icon-size='50'>
        <GridItem icon="https://m.360buyimg.com/n1/s150x150_jfs/t29566/227/1464891645/10350/a5b133e2/5ce20cdcNd9cdd972.jpg!q70.jpg.dpg" text="免息星球" />
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/89676/29/5758/20628/5def37a2Eff165a1c/b41fe7c9ac32f16f.jpg!q70.jpg.dpg" text="每日特价" />
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/88638/33/5675/28468/5def3b04E728e691f/8997a8bf07db66b7.png!q70.jpg.dpg" text="品牌闪购" />
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/75300/31/13658/33045/5daeb773Ebbbd91bd/47a1bdf9047ed568.jpg!q70.jpg.dpg" text="京东直播" />
      </Grid>
      <Grid :column-num="4" icon-size='50'>
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t10675/97/2254709219/9497/6ba245fd/59f14a23N0594b89c.jpg!q70.jpg.dpg" text="排行榜" />
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/76945/35/760/26244/5cef9705E501242ee/c56b89c0946438ef.jpg!q70.jpg.dpg" text="拍拍好物" />
        <GridItem icon="https://m.360buyimg.com/n1/s150x150_jfs/t1/116252/24/2308/43604/5ea1359fE61a06adb/6cef94529cd1cf09.png!q70.jpg.dpg" text="新品首发" />
        <GridItem icon="https://m.360buyimg.com/mobilecms/s150x150_jfs/t1/50174/30/1230/9784/5cef98bfE318f8d24/4720dc4079dd568b.jpg!q70.jpg.dpg" text="发现好货" />
      </Grid>
      <NoticeBar class='g-mt-10 g-radius-6' :text='noticeText' left-icon='volume-o' mode="link"/>
      <img class='g-img-response g-mt-10' src=" https://img11.360buyimg.com/jdphoto/jfs/t1/31601/22/15554/14040/5cc2a86fEbdb1098b/88174b36f85283b6.png" alt="">
     <List
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <Card 
        v-for="item in productList" :key="item.price"
        class='product-card'
        :desc="item.desc"
        :title="item.title"
        :thumb="item.thumb"
      >
        <template #price>
          <span class="g-text-price">￥{{item.price}}</span>
        </template>
      </Card>
    </List>
    </div>
  </div>
</template>

<script>
import { 
  NavBar, Icon, Sticky, Swipe, SwipeItem ,
  CountDown,Grid, GridItem,NoticeBar,List ,Card 
} from "vant";
import HeaderSearch from "../../components/HeaderSearch";
export default {
  name: "home",
  components: {
    NavBar,
    Icon,
    Sticky,
    HeaderSearch,
    Swipe,
    SwipeItem,
    CountDown,
    Grid, GridItem,
    NoticeBar,List,Card 
  },
  data() {
    return {
      isAuth: false,
      swipeCur: 0,
      bannerList: [
        {
          url:
            "https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/108243/17/15238/91319/5eab0aeaE929977e3/af3af5417cd632c9.jpg!cr_1125x445_0_171!q70.jpg",
          id: 1
        },
        {
          url:
            "https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/114055/28/3591/143346/5ea91ca0E1bb78fe7/a049b51ddafe7e22.jpg!cr_1125x445_0_171!q70.jpg.dpg",
          id: 2
        },
        {
          url:
            "https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/119338/30/4160/150902/5eac3dbbEf4290493/285d5c05d9121553.jpg!cr_1125x445_0_171!q70.jpg.dpg",
          id: 3
        }
      ],
      msProductList: [
        {
          img: 'https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/87716/25/15548/214346/5e7357eaEa39cc680/87cac2a8bf4af3bc.jpg.dpg',
          id: 1,
          newCost: 4399,
          oldCost: 4999,
        },
        {
          img: 'https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/52518/9/14124/305755/5dad6eb1Efbe1754c/fbe665e4b3fbf69f.jpg.dpg',
          id: 2,
          newCost: 99,
          oldCost: 109,
        },
        {
          img: 'https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/109251/26/14258/187443/5ea697e5Ecddc665c/ddfb1297d93e2215.jpg.dpg',
          id: 3,
          newCost: 236,
          oldCost: 288,
        },
        {
          img: 'https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/108381/25/14923/129923/5ea94c35E5ce5bebd/e6ae6c5bb6a21e17.jpg.dpg',
          id: 4,
          newCost: 36,
          oldCost: 28,
        },
        {
          img: 'https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/70739/29/15937/152947/5dd78453E03269b36/b02347a79a72a844.jpg.dpg',
          id: 5,
          newCost: 1036,
          oldCost: 1288,
        },
        {
          img: 'https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/107364/20/14983/111885/5eaa3476E3d05f8c8/4d99c46f35365901.jpg.dpg',
          id: 6,
          newCost: 88,
          oldCost: 99,
        },
        {
          img: 'https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/41960/19/6890/171596/5d070383Ea18367d4/7828de3a22af3c8a.jpg.dpg',
          id: 6,
          newCost: 2799,
          oldCost: 2899,
        },
      ],
      countDownTime: 30 * 60 * 60 * 1000,
      noticeText: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
      productList: [],
      randomProduct: [
        {
          title: "联想ThinkPad E480",
          desc: ' 14英寸窄边框商务办公手提笔记本电脑超轻薄本 银色 【i3黑色】8G500+256G固态@4K定制 ',
          thumb: 'https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/100774/17/19593/202263/5e9fbeaaE53737eee/596b0b1bd10a392d.jpg!q70.dpg.webp'
        },
        {
          title: "联想ThinkPad X395",
          desc: ' 13.3英寸商务便携轻薄笔记本电脑窄边框IPS广视角 锐龙PRO R5-3500U 8G 512G固态@0WCD标配',
          thumb: 'https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/118658/15/3158/144372/5ea65843Eb7ccc71b/dd73022946ae1e5a.jpg!q70.dpg.webp'
        },
        {
          title: "品质优选】实木衣帽架落地卧室挂衣架家用简易单杆式房间衣服架子 ",
          desc: ' 原木色榉木-配饰黄铜',
          thumb: 'https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/105287/35/17747/169663/5e8bdfd8E20c2a02c/9667860f8128819e.jpg!q70.dpg.webp'
        },
      ],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onClickLeft() {
     this.$router.push('/category') 
    },
    onClickRight() {
      if (!this.isAuth) {
        this.$router.push('/login?redirect=/home')
      } else {
        this.$router.push('/me')
      }
    },
    swipeChange(index) {
      this.swipeCur = index;
    },
    onLoad() {
       // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          let index = Math.floor(Math.random()*3);
          this.productList.push({
            title: this.randomProduct[index].title,
            desc: this.randomProduct[index].desc,
            price: Math.floor(Math.random()*9999)+'.00',
            thumb: this.randomProduct[index].thumb
          });
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.productList.length >= 30) {
          this.finished = true;
        }
      }, 1000);
    }
  },
  created() {
    this.isAuth = sessionStorage.getItem('auth')
  }
};
</script>

<style lang='scss' scoped>
$primary-color: #e43130;
.hd-navbar {
  background: $primary-color;
  color: #fff;
  &::after {
    display: none;
  }
}
.swipe {
  width: 96vw;
  margin: 10px auto;
  overflow: hidden;
}
.placehdler-bg {
  background: $primary-color;
  width: 100vw;
  height: 100px;
  position: absolute;
  transform: translateY(-2px);
}

.icon-navbar {
  width: 80%;
  margin-bottom: 5px;
}
.navbar-box {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  .navbar-item {
    width: 20%;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.navbar-indicators {
  bottom: 0;
  .van-swipe__indicator {
    background: rgba(0,0,0,.4);
    &.active {
      background: $primary-color;
      opacity: 1;
    }
  }
}
.img-ms {
  width: 70px
}
// 倒计时
  .countDown-item {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: $primary-color;
  }
  .product-scroll {
    overflow-x: auto;
    white-space: nowrap;
    .product {
      width: 20vw;
      padding: 0 5px;
      display: inline-block;
      overflow-x: auto;
    }
  }
  .product-card {background: #fff;}
</style>
